<template>
	<view class="">
		<view class="foot-nav" :style="'padding-bottom:'+ buBottom + 'rpx'">
			<navigator :class="indexNum == 1 ? 'foot-nav-item active':'foot-nav-item'" url="/pages/index/index">
				<image src="../../static/images/footer-icon1.png" class="foot-nav-icon"></image>
				<text class="">首页</text>
			</navigator>
			<navigator :class="indexNum == 2 ? 'foot-nav-item active':'foot-nav-item'" url="/pages/works/index">
				<image src="../../static/images/footer-icon2.png" class="foot-nav-icon"></image>
				<text class="">客照作品</text>
			</navigator>
			<navigator :class="indexNum == 3 ? 'foot-nav-item active':'foot-nav-item'" url="/pages/offer/index">
				<image src="../../static/images/footer-icon3.png" class="foot-nav-icon"></image>
				<text class="">获取报价</text>
			</navigator>
			<navigator class="foot-nav-item">
				<button open-type="contact" bindcontact="handleContact" class="kefu-btn"></button>
				<image src="../../static/images/footer-icon4.png" class="foot-nav-icon"></image>
				<text class="">在线客服</text>
			</navigator>
		</view>
		<view class="footer-margin-wrap" :style="'padding-bottom:'+ buBottom + 'rpx'">
			<view class="footer-margin"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneX: getApp().globalData.isIphoneX,
				buBottom: '0',
			}
		},
		props: {
			indexNum: {
				type: String,
				default: ""
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success: res => {
					// console.log('手机信息res'+res.model)
					let modelmes = res.model;
					if (modelmes.search('iPhone X') != -1) {
						that.buBottom = 68
					}
				}
			})
		}
	}
</script>

<style>
	.foot-nav {
		display: flex;
		flex-wrap: nowrap;
		z-index: 50;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #262626;
		box-shadow: 0 -5rpx 5rpx rgba(0, 0, 0, .02);
	}

	.foot-nav-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 120rpx;
		font-size: 24rpx;
		color: #fff;
		opacity: 0.6;
		position: relative;
	}
	
	.kefu-btn{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.foot-nav-icon {
		width: 60rpx;
		height: 60rpx;
	}

	.foot-nav-item.active {
		opacity: 1;
	}

	.footer-margin {
		height: 120rpx;
		box-sizing: content-box;
	}
</style>
